<template>
  <div class="paymentSlip-box">
    <!-- 入库申请付款单 -->
    <serchForm
      :Form="inventoryForm"
      :FormLabel="inventoryFormLabel"
      @onSearch="onSearch"
    />
    <div class="function-box">
      <el-button
        class="createBtn"
        @click="addPaymentSlip"
      ><i
          class="iconfont icon-plus-square"
          v-if="checkPermi(['system:payment:edit'])"
        />新增</el-button>
      <el-button
        class="visitBtn"
        @click=""
        v-if="checkPermi(['system:payment:edit']) && false"
      ><i class="iconfont icon-daochu"></i>
        导出
      </el-button>
      <!-- <el-button class="reviseBtn" @click="updatePaymentSlip"><i class="iconfont icon-xiugai"/>修改</el-button> -->
      <el-button
        class="exportBtn"
        @click="deleteData"
      ><i
          class="iconfont icon-shanchu"
          v-if="checkPermi(['system:payment:edit'])"
        />删除</el-button>
    </div>
    <forTableCom
      :color="color"
      :idActive="idActive"
      :bg="bg"
      :total="totals"
      :page="pageNum"
      :limit="pageSize"
      @handleSelectionChange="handleSelectionChange"
      @handleChange="handleChange"
      @updatePage="updatePage"
      @updateLimit="updateLimit"
      :tableHeaderData="inventoryTableHeaderData"
      :tableData="inventoryTableData"
      @tableDetail="tableDetail"
    >
    </forTableCom>
    <paymentSlipPop
      v-if="flag"
      :PopData="PopData"
      :popTitle="popTitle"
      :defindFlag="defindFlag"
      @popUpsFlase="popUpsFlase"
      :disabled="disabled"
      @getoutboundOrderData="getoutboundOrderData"
    />
  </div>
</template>
<script setup>
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue'
import { querySelectPaymentApi, deleteApplicationApi } from '@/api/inventory/index.js'
import paymentSlipPop from './components/paymentSlipPop'
import { updatePopHook } from '@/hook/setPop/updatePop.js'
import { ref, onMounted } from 'vue'
import { checkPermi } from "@/utils/permission.js";

let updatePop = updatePopHook()
const idActive = 'stockroomId'
let flag = ref(false)
let disabled = ref(false)
let popTitle = ref('新增付款申请单')
// 详情控制变量
let defindFlag = ref(true)
// 修改详情回显数据弹窗
let PopData = ref([])
// 表单
let inventoryForm = ref(
  {
    applicationId: '',      // 申请编号
    applicationDate: '',    // 申请日期
    stockroomId: '',        // 入库编号
    approver: '',        // 审批人
    auditStatus: '',        // 审核状态
  }
)
// 表单数据标题
let inventoryFormLabel = ref([
  {
    name: 'applicationId',
    label: '申请编号',
  },
  {
    name: 'applicationDate',
    label: '申请日期',
    type: 'picker'
  },
  {
    name: 'stockroomId',
    label: '入库编号'
  },
  {
    name: 'approver',
    label: '审批人',
    disabled: true
  },
  {
    name: 'auditStatus',
    label: '审核状态',
    disabled: true
  },
])
// 查找
const onSearch = (v) => {
  // 每次查询后回到页1
  pageNum.value = 1
  querySelectPaymentFun(v)
}
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')

// 总条目数   pageSize 加 1
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])


// 表格表头数据
let inventoryTableHeaderData = ref([
  {
    prop: 'stockroomId',
    label: '入库编号',
    colorClassName: 'activeColor',
    minwidth: '120px'
  },
  {
    prop: 'applicationId',
    label: '申请编号',
    colorClassName: 'activeColor',
    minwidth: '120px'
  },
  {
    prop: 'applicationDate',
    label: '申请日期',
    colorClassName: 'activeColor',
    minwidth: '120px'
  },
  {
    prop: 'applicationPerson',
    label: '申请人',
    minwidth: '90px'
  },
  {
    prop: 'supplierName',
    label: '供应商名称',
    minwidth: '100px'
  },
  {
    prop: 'specs',
    label: '规格型号',
    minwidth: '100px'
  },
  {
    prop: 'storageNumber',
    label: '入库数量',
    minwidth: '100px'
  },
  {
    prop: 'unit',
    label: '单位',
    minwidth: '80px'
  },
  {
    prop: 'price',
    label: '成本单价',
    minwidth: '100px'
  },
  {
    prop: 'paymentMoney',
    label: '付款金额',
    minwidth: '120px'
  },
  {
    prop: 'priceType',
    label: '价格类型',
    colorClassName: 'activeColor',
    minwidth: '100px'
  },
  {
    prop: 'paymentMethods',
    label: '付款方式',
    colorClassName: 'activeColor',
    minwidth: '100px'
  },
  {
    prop: 'auditStatus',
    label: '审核状态',
    minwidth: '100px'
  },
  {
    prop: 'approver',
    label: '审批人',
    minwidth: '90px'
  },
  {
    prop: 'auditDate',
    label: '审核日期',
    colorClassName: 'activeColor',
    minwidth: '120px'
  },
  {
    prop: 'invoiceStatus',
    label: '发票状态',
    colorClassName: 'activeColor',
    minwidth: '120px'
  }
])
// 表格数据内容
let inventoryTableData = ref([

])

// 选中的列
const handleSelectionChange = (v) => {
  multipleSelection.value = v
  console.log(v);
}

// 分页器大小  当前分页器
const handleChange = (v) => {
  let { page, limit } = v.page
  pageNum.value = page
  pageSize.value = limit
  let params = inventoryForm.value
  querySelectPaymentFun(params)
}
// 当前页面位置发生变化
const updatePage = (v) => {
  console.log('页面位置发生变化', v);
}
// 条目个数发生变化
const updateLimit = (v) => {
  console.log('条目个数发生变化', v);
}

// 删除勾选的列二次提示
const deleteData = () => {
  let fn = async () => {
    let params = {
      applicationId: multipleSelection.value[0].applicationId
    }
    let res = await deleteApplicationApi(params)
    let { code, msg } = res
    if (code == 200) {
      querySelectPaymentFun()
      ElMessage({
        message: msg,
        type: 'success',
      })
    }
  }
  deletePop(multipleSelection, fn)
}

// 查询入库申请付款单
const querySelectPaymentFun = async (data = {}) => {
  let page = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }
  let params = Object.assign(data, page)
  let res = await querySelectPaymentApi(params)
  let { code, rows, total } = res
  if (code == 200) {
    // 改变日期显示长度问题
    // inventoryTableData.value = sliceDate(rows, 'outboundDate')
    inventoryTableData.value = rows
    totals.value = total
  }
}
// 
const getoutboundOrderData = () => {
  querySelectPaymentFun()
}
// 打开新增弹窗
const addPaymentSlip = () => {
  flag.value = true;
  popTitle.value = '新增付款申请单';
  disabled.value = false
}
// 详情双击行
const tableDetail = (props) => {
  disabled.value = true
  flag.value = true
  popTitle.value = '付款申请单信息'
  defindFlag.value = false
  PopData.value = props
}
// 打开修改弹窗
const updatePaymentSlip = () => {
  // 数据
  updatePop(multipleSelection, flag, popTitle, '修改付款申请单')
}
// 关闭弹窗
const popUpsFlase = (props) => {
  defindFlag.value = true
  flag.value = props;
}
onMounted(() => {
  querySelectPaymentFun()
})
</script>
<style scoped lang='scss'>
.paymentSlip-box {
  padding: 16px;
}
</style>
